<template>
	<view class="e-p-30" :style="[AppSkinVar]">
		<view class="e-m-b-20">
			<text class="e-font-36 fw-600">{{ info.title }}</text>
		</view>
		<view class="e-m-b-40 e-flex e-flex-between">
			<view>
				<text class="c-secondary e-p-r-20">{{ info.authorName }}</text>
				<text class="c-secondary ">{{ info.views || 0 }}{{$t('layout.阅读')}}</text>
			</view>
			<text class="c-secondary">{{ $timeFormat(info.date, 'yyyy-mm-dd') }}</text>
		</view>
		<view class="ql-container ql-snow">
			<view class="ql-editor">
				<rich-text :nodes="content"></rich-text>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';
import type { InformationItem } from '@/common/request/api';
import { getInformationInfo } from '@/common/request/api';
import { richTextFilter } from '@/common/utils';
import { onLoad } from '@dcloudio/uni-app';

const props = defineProps<{
	id: string;
}>();

const info = ref<InformationItem>();
const content = computed(() => richTextFilter(info.value?.content));

onLoad(() => {
	getInformationInfo(props.id).then((res) => {
		info.value = res.data;
	});
});
</script>
<style lang="scss">
	page{
		background-color: $base-color-white;
	}
</style>
<style lang="scss" scoped></style>
